import React from 'react'
import { Table, Button, Space, Input } from 'antd'
import { usePageInfo } from '@/hooks'
import { history } from 'umi'

const { Search } = Input;

type Props = {}

const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: "center",
        render: (text: any, obj: any, index: number) => {
            return <span>
                {index + 1}
            </span>
        }
    },
    { title: '英雄名称', dataIndex: 'name', key: 'name', align: "center", },
    { title: '英雄称号', dataIndex: 'title', key: 'title', align: "center", },
    {
        title: '所属分类',
        dataIndex: 'cate',
        key: 'cate',
        align: "center",
        render: (text: any) => {
            {
                console.log(text)
            }
            return <div>
                {
                    text.map((item: any, index: number) => {
                        return <span key={item._id}>
                            {item.name} {index === text.length - 1 ? '' : '/'}
                        </span>
                    })
                }
            </div>
        }
    },
    {
        title: '头像',
        align: "center",
        dataIndex: 'avatar',
        key: 'avatar',
        render: (text: any) => {
            return <img style={{
                width: "50px",
                height: "50px"
            }} src={text} alt="" />
        }
    },
    {
        title: '操作',
        align: "center",
        dataIndex: '',
        key: 'x',
        render: () => <Space>
            <Button type="primary">编辑</Button>
            <Button type="primary" danger>删除</Button>
        </Space>,
    },
];


export default function HeroList({ }: Props) {
    const { data, pagination, change, search } = usePageInfo()

    const onSearch = (value: string)=> {
        search(value)
    };
    
    return (
        <div className='p20'>
            <div className='context_card'>
                {/* 搜素 */}
                <Search className='mt15' placeholder="请输入要搜索的内容" onSearch={onSearch} enterButton />
                {/* 添加英雄 */}
                <Button className='mt15'
                        onClick={() => {
                            history.push('/hero/addhero')
                        }}
                        type="primary"> + 添加英雄</Button>
                {/* 表格 */}
                <Table
                    className='mt15'
                    bordered
                    pagination = { pagination }
                    onChange = { change }
                    columns={columns}
                    expandable={{
                        expandedRowRender: record => <div className='center' style={{ margin: 0 }}>
                            {
                                record.skills.map((item: any) => {
                                    return <dl key={item._id}>
                                        <dt>
                                            <img style={{
                                                width: "50px",
                                                height: "50px"
                                            }} src={item.icon} alt="" />
                                        </dt>
                                        <dd>
                                            {item.name}
                                        </dd>
                                    </dl>
                                })
                            }
                        </div>
                    }}
                    dataSource={data}
                />
            </div>
        </div>
    )
}